<template>
  <div class="min-h-screen flex flex-col">
    <div class="container mx-auto px-4 py-8 flex-1">
      <h1 class="text-4xl font-bold text-center mb-6 relative after:block after:w-24 after:h-1 after:bg-primary-500 after:mx-auto after:mt-2">
        微视频图片
      </h1>
      <a-breadcrumb class="text-center mb-6">
        <a-breadcrumb-item>
          <a href="/" class="hover:underline">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/MF" class="hover:underline">微影视图片</router-link>
        </a-breadcrumb-item>
      </a-breadcrumb>

      <video-table />
    </div>
    <FooterComponent />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import FooterComponent from './Footer.vue';
import VideoTable from './DataTable/videoTable.vue';

onMounted(() => {
  document.title = '农业外来入侵物种防控与管理平台';
});
</script>

<style scoped>
</style>
